import React, { useState } from 'react';
import { Form, Input, Button, Modal, Descriptions, Radio, Select } from 'antd';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import columnsData, { columnsDataType } from './data';
import TableTitle from '../../../components/TableTitle';
import { PlusOutlined } from '@ant-design/icons';
// 页面跳转
import { Link, history } from 'umi';

export default () => {
  const { TextArea } = Input;
  const { Option } = Select;
  // 控制新增模态框
  const [isTaskModal, setIsTaskModal] = useState(false);
  // 表头数据
  const columns: ProColumns<columnsDataType>[] = columnsData;

  // 操作行数据 自定义操作行
  const actionRender: any = (text: any, record: any, index: number) => (
    <ul className="ant-list-item-action" style={{ margin: 0 }}>
      <li>
        {/* <a onClick={() => { check(record.custNo) }}>查看</a> */}
        <em className="ant-list-item-action-split"></em>
      </li>
    </ul>
  );

  // 自定义数据的表格头部数据
  columns.forEach((item: any) => {
    item.dataIndex === 'action' ? (item.render = actionRender) : undefined;
  });

  // Table action 的引用，便于自定义触发
  const actionRef = React.useRef<ActionType>();
  // 新增
  const increase = () => {
    setIsTaskModal(true);
  };
  const confirmTask = () => {
    setIsTaskModal(false);
  };

  const cancelTask = () => {
    setIsTaskModal(false);
  };

  return (
    <div>
      {/* Pro表格 */}
      <ProTable<columnsDataType>
        headerTitle={<TableTitle title="原力规则" />}
        scroll={{ x: 900 }}
        actionRef={actionRef}
        bordered
        // 表头
        columns={columns}
        // 请求获取的数据
        // request={
        //   async params => {
        //     console.log(params);
        //     let data = await getMerchantList({ ...params, pageNum: params.current })
        //     console.log('😒', data);
        //     const result = {
        //       data: data.body.list,
        //       total: data.body.total,
        //     }
        //     return result;
        //   }
        // }
        rowKey="custNo"
        // 本地存储表格列的显示数据
        columnsState={{
          persistenceKey: 'pro-table-singe-demos',
          persistenceType: 'localStorage',
        }}
        // 搜索框配置
        search={{
          labelWidth: 'auto',
        }}
        // 搜索表单的配置
        form={{
          ignoreRules: false,
        }}
        pagination={{
          pageSize: 10,
        }}
        dateFormatter="string"
        toolBarRender={() => [
          <Button
            onClick={() => {
              increase();
            }}
            key="button"
            icon={<PlusOutlined />}
            type="primary"
          >
            新增
          </Button>,
        ]}
      />
      {/* 新增任务模态框 */}
      <Modal
        title="空投信息"
        visible={isTaskModal}
        onOk={confirmTask}
        onCancel={cancelTask}
        centered
      >
        <Form
          name="basic"
          labelCol={{ span: 7 }}
          wrapperCol={{ span: 14 }}
          initialValues={{ remember: true }}
        >
          <Form.Item
            label="任务1"
            name="username"
            rules={[{ required: true, message: 'Please input your username!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="任务2"
            name="account"
            rules={[{ required: true, message: 'Please input your username!' }]}
          >
            <Input />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};
